承上篇，講講第二個工具，React-Toastify (v10.0.5)~

其實跟前者很相似，吐司一樣是 toast()，但烤箱換成 。這個具備更豐富的預設樣式，包括進度條、動畫等等，缺點當然也顯而易見，體積比 React-Hot-Toast 稍大，配置也複雜許多。

1. 烤得恰恰好的吐司的魔法第一步：在 VS code 打開專案，打開終端機，輸入安裝指令，並在專案中導入。

   npm install react-toastify
   

   import { ToastContainer, toast } from 'react-toastify';
   

2. 烤得恰恰好的吐司的魔法第二步：拿出吐司 toast()

   toast('Toastify！', {
     position: "top-right", //通知的位置，如 top-right, top-center, bottom-left 等
     autoClose: 5000, //關閉通知的時間（毫秒），如果設置為 false，則需要手動關閉
     hideProgressBar: false, //是否隱藏進度條
     closeOnClick: true, //是否可以點擊通知來關閉它
     pauseOnHover: true, //當滑鼠懸停在通知上時，是否暫停計時（延長顯示時間）
     draggable: true, //通知是否可以拖動移動
     progress: undefined, // 進度條的當前進度，設置為 undefined 表示使用默認的自動進度控制
     progressStyle: { backgroundColor: 'green' }, // 自定義進度條的樣式，這裡設置進度條的背景色為綠色
     style: { // 自定義通知的樣式
       background: 'blue',
       color: 'white',
     }
   });
   

   這裡也有菜單可以參考～

   toast.success('操作成功！');
   toast.error('發生錯誤！');
   toast.info('這是一條信息！');
   toast.warning('這是一條警告！');
   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve('成功了！');
     }, 3000);
   });
   
   toast.promise(myPromise, {
     pending: '處理中...',
     success: '已成功',
     error: '發生錯誤'
   });
   

3. 烤得恰恰好的吐司的魔法第三步：搬出烤箱
   當然也是可以變成便利貼的方式來做。

   <ToastContainer
     position="top-right"
     autoClose={5000}
     hideProgressBar={false}
     newestOnTop={false}
     closeOnClick
     rtl={false}
     pauseOnFocusLoss
     draggable
     pauseOnHover
     theme="light"
     transition: Bounce,
   />
   

   但其實有更簡單的方法，就是直接上他們的官方文件的 Playground，可以不寫一行程式碼就能做好吐司囉～

總結一下：

Toastify：適合那些需要更豐富的樣式、自定義通知行為的應用。它內置了很多功能（如進度條、動畫等），但代價是更大的庫體積和略微複雜的配置。
React Hot Toast：較簡潔、輕量，專注於現代化的通知體驗。如果你的應用不需要進度條或過於複雜的配置，它是快速且簡單的解決方案。

大概就是這樣了，各位魔法使們現在應該是滿嘴的吐司了吧～